<template>
	<view @click="goback">
		<up-navbar
		  title="校赛咨询"
		  bg-color="#00757f"
		  title-color="white" 
		  left-icon-color="white"
		       >
		       </up-navbar>
	</view>
	<view class="container">
		<view class="navbar">
		  <!-- 搜索框 -->
		  <input
		    class="search-input"
		    type="text"
		    placeholder="请输入活动名称关键字"
		    v-model="searchText"
		    @confirm="onSearch"
		  />
		  <!-- 搜索按钮 -->
		  <button class="search-button" @click="onSearch">搜索赛事</button>
		</view>
	  
	    <view class="qvbie">
	        <text @click="goToXCompetition">省赛</text>
	        <text>校赛</text>
	    </view>
	</view>
	       
	
	<view class="main">
	    <view class="main-content" id="#shengsai">
	        <view class="check1">
	            <view class="lqb" style="background-image: url('/static/图片/lqbds.jpg'); background-size: cover; width: 130px; height: 110px;">
	            </view>
				<view class="saishi">
					第十六届蓝桥杯大赛（软件类）
					<view class="shidi">
						<text>2024-12-02 至 2024-12-09</text>
						<text>广东白云学院西校区</text>
					</view>
				</view>
	            <view class="chakan1">
	                <button class="chakan-button" @click="onSearch">查看详情</button>
	            </view>
	        </view>
	               
	        <view class="check2">
	            <view class="wlpc" style="background-image: url('/static/图片/wlpc.jpg'); background-size: cover; width: 130px; height: 110px;">
	            </view>
	            <view class="saishi">
					第十届网络爬虫竞赛
					<view class="shidi">
						<text>2024-11-06 至 2024-12-30</text>
						<text>广东白云学院西校区</text>
					</view>
				</view>
	            <view class="chakan2">
	                <button class="chakan-button" @click="onSearch">查看详情</button>
	            </view>
	        </view>   
	
	        <view class="check2">
	            <view class="web" style="background-image: url('/static/图片/web.jpg'); background-size: cover; width: 130px; height: 110px;">
	            </view>
	            <view class="saishi">
					第八届web应用与开发竞赛
					<view class="shidi">
						<text>2024-11-06 至 2024-12-30</text>
						<text>广东白云学院西校区</text>
					</view>
				</view>
	            <view class="chakan3">
	                <button class="chakan-button" @click="onSearch">查看详情</button>
	            </view>
	        </view>
	
	        <view class="check2">
	            <view class="pmsj" style="background-image: url('/static/图片/pmsj.jpg'); background-size: cover; width: 130px; height: 110px;">
	            </view>
	            <view class="saishi">
					第四届平面设计竞赛
					<view class="shidi">
						<text>2024-11-05 至 2024-12-30</text>
						<text>广东白云学院西校区</text>
					</view>
				</view>
	            <view class="chakan4">
	                <button class="chakan-button" @click="onSearch">查看详情</button>
	            </view>
	        </view>
	
	        <view class="check3">
	            <view class="byck" style="background-image: url('/static/图片/pmsj.jpg'); background-size: cover; width: 130px; height: 110px;">
	            </view>
	            <view class="saishi">
					第四届白云创客大赛
					<view class="shidi">
						<text>2024-10-30 至 2024-12-10</text>
						<text>广东白云学院西校区</text>
					</view>
				</view>
				<view class="chakan5">
				    <button class="chakan-button" @click="onSearch">查看详情</button>
				</view>
	        </view>   
			
	    </view>
	</view>
</template>

<script setup>
import { ref } from 'vue';

const searchText = ref('');

// 搜索按钮点击事件
const onSearch = () => {
  if (searchText.value.trim()) {
    uni.showToast({
      title: `搜索赛事: ${searchText.value}`,
      icon: 'none',
    });
    // 这里可以执行搜索逻辑
  } else {
    uni.showToast({
      title: '请输入活动名称关键字',
      icon: 'none',
    });
  }
};

const goToXCompetition = () => {
  uni.navigateTo({
    url: '/pages/shengsai/index'
  });
};

const goback = () => {
	uni.switchTab({
		url:'/pages/home/index'
	})
}
</script>

<style lang="scss" scoped>
	.top{
		margin-top: 55px;
	}
	.top text{
		font-size: 20px;
		color: rgb(27, 132, 149);
	}
	.arrow {
		left: -57%;
		top:23px
	}
	.navbar {
	    width: 370px;
	    display: flex;
	    align-items: center;
	    padding: 10px;
	    background-color: whitesmoke;
	    border-bottom: 1px solid #ddd;
		margin-top: 64px;
	    }
	
	.search-input {
	    flex: 1;
	    height: 46px;
	    padding: 0 10px;
	    border: 1px solid #ddd;
	    border-radius: 5px;
	    margin-right: 10px;
	    }
	
	.search-button {
	    width: 110px;
	    height: 46px;
	    line-height: 46px;
	    text-align: center;
		font-size: 15px;
	    background-color: rgba(89, 152, 197, 0.839);
	    color: #fff;
	    border-radius: 5px;
	    border: none;
	    }
	
		
	.qvbie{
	    position: relative;
	    left: 90px;
		width: 500px;
	    margin: 0 auto 0 auto;
	    overflow: hidden;
	    }
	
	.qvbie > text{
	    display: inline-block;
	    width: 100px;
	    margin: 0;
	    color: rgb(55, 154, 225);
	    border-radius: 5px;
	    padding: 0 10px 0 10px;
	    text-align: center;
	    font-size: 25px;
		text-decoration-color: rgb(102, 102, 192);
	    }

	.check1{
	    width: 800px;
		height: 110px;
	    margin: 2px auto;
	    padding-top: 10px;
	    padding-bottom: 10px;
	    border-top: gray solid 1px;
	    border-bottom: gray solid 1px;
	    overflow: hidden;
	    }
	.check2{
	    width: 800px;
		height: 110px;
	    margin: 2px auto;
	    padding-top: 5px;
	    padding-bottom: 10px;
	    border-bottom: gray solid 1px;
	    overflow: hidden;
	    }
	.check3{
	    width: 800px;
		height: 110px;
	    margin: 2px auto;
	    padding-top: 5px;
	    padding-bottom: 10px;
	    overflow: hidden;
	    }	
		
	.saishi{
		margin: 7px;
	    position: relative;
	    left: 10px;
	    font-size: 18px;
	    }
	.shidi > text{
		margin-top: 10px;
		display: block;
	    font-size: 14px;
	    color: gray;
	    }
	  
	.lqb,.saishi{
	    float: left;
	    }
	        
	.wlpc,.saishi{
	    float: left;
	    }
	        
	.web,.saishi{
	    float: left;
	    }
	        
	.pmsj,.saishi{
	    float: left;
	    }
	
	.byck,.saishi{
	    float: left;
	    }
		
	.chakan1{
		position: relative;
		right: 110px;
		top: 70px;
		}
	.chakan2{
		position: relative;
		right: 36px;
		top: 70px;
		}
	.chakan3{
		position: relative;
		right: 74px;
		top: 70px;
		}
	.chakan4{
		position: relative;
		right: 34px;
		top: 70px;
		}
	.chakan5{
		position: relative;
		right: 34px;
		top: 70px;
		}
    .chakan-button{
		display: inline-block;
		width: 90px;
		height: 37px;
		line-height: 17px;
		text-align: center;
		border: 2px solid rgb(156, 156, 222);
		border-radius: 5px;
		padding: 0 15px 0 15px;
		font-size: 15px;
		padding: 10px;
		background-position: right;
		color: #5476cd;
		background-color: white;
		}
</style>